<template>
  <van-cell center title="匹配模式">
    <template #right-icon>
      <van-switch v-model="isMatchMode" size="24" />
    </template>
  </van-cell>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <UserCardList :user-list="userList" :loading="loading" />
    <van-empty v-if="!userList || userList.length < 1" description="搜索结果为空" />
  </van-pull-refresh>
  <van-back-top class="van-back-top" bottom="15vh" />
  <div style="text-align: center;
                padding: 20px 20px;
                column-span: all;"
  >
    <van-button type="primary" size="small" @click="loadClick">点击加载更多</van-button>
  </div>
</template>

<script setup lang="ts">
import {markRaw, onMounted, ref, watchEffect} from "vue";
import myAxios from "../plugins/myAxios";
import {showFailToast, showLoadingToast, showSuccessToast} from "vant";
import UserCardList from "../components/UserCardList.vue";
import {UserType} from "../models/user";

const userList = ref([]);
const isMatchMode = ref<boolean>(false);
const loading = ref<boolean>(false);
//分页加载
const pageNumByMatch = ref(2);
const pageNumByRecommend = ref(2);
//下拉刷新
const refreshing = ref(false);
const finished = ref(false);

// onMounted(async () => {
//   // Make a request for a user with a given ID
//   //请求推荐页面接口
//   const userListData = await myAxios.get('/user/recommend',{
//     params: {
//       pageSize: 8,
//       pageNum: 1,
//     },
//   })
//       .then(function (response) {
//         console.log('/user/recommend success', response);
//         showSuccessToast('请求成功');
//         return response?.data?.records; //返回数据 ?.可选链操作符，避免数据为 null
//       })
//       .catch(function (error) {
//         console.log('/user/recommend error', error);
//         showFailToast('请求失败');
//       })
//   if (userListData){
//     userListData.forEach(user => {
//       if (user.tags){
//         user.tags = JSON.parse(user.tags)
//       }
//     })
//     userList.value = userListData;
//   }
// })

/**
 * 加载
 */
const onLoad = () => {

  setTimeout(() => {
    if (refreshing.value) {
      refreshing.value = false;
    }
    // onTabChange(tabName);
    loading.value = false;
    //console.log('tabName===' + tabName.value)
    loadData();
  }, 1000);
};

/**
 * 下拉刷新
 */
const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};

/**
 * 点击加载更多
 */
const loadClick = async () => {
  let userListData;
  //匹配模式，根据标签匹配用户
  if (isMatchMode.value){
    showLoadingToast({
      message: '加载中',
      forbidClick: true
    })
    userListData = await myAxios.get('/user/match', {
      params: {
        pageSize: 5,
        pageNum: pageNumByMatch.value++
      },
    })
      .then(function (response) {
        console.log('/user/match success', response);
        showSuccessToast('加载成功');
        return response?.data; //返回数据 ?.可选链操作符，避免数据为 null
      })
      .catch(function (error) {
        console.log('/user/match error', error);
        showFailToast('加载失败');
      })
  }else {
    //普通模式
    showLoadingToast({
      message: '加载中',
      forbidClick: true
    })
    userListData = await myAxios.get('/user/recommend', {
      params: {
        pageSize: 5,
        pageNum: pageNumByRecommend.value++
      },
    })
        .then(function (response) {
          console.log('/user/recommend success', response);
          showSuccessToast('加载成功');
          return response?.data?.records; //返回数据 ?.可选链操作符，避免数据为 null
        })
        .catch(function (error) {
          console.log('/user/recommend error', error);
          showFailToast('加载失败');
        })
  }
  if (userListData) {
    console.log("url= " + userListData.avatarUrl);
    userListData.forEach((user: UserType) => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    // userListData.avatarUrl = "data:image/*;base64," + userListData.avatarUrl;
    // userListData.value = userListData.value.concat(userListData.data?.records);
    userList.value = userList.value.concat(userListData);
    console.log("list== " + userList.value.length);
  }
}

/**
 * 加载数据
 */
const loadData = async () => {
  loading.value = true;
  let userListData;
  //匹配模式，根据标签匹配用户
  showLoadingToast({
    message: '加载中',
    forbidClick: true
  })
  if (isMatchMode.value){
    //const num = 2;
    userListData = await myAxios.get('/user/match', {
      params: {
        pageSize: 5,
        pageNum: 1
      },
    })
      .then(function (response) {
        console.log('/user/match success', response);
        showSuccessToast('加载成功');
        return response?.data; //返回数据 ?.可选链操作符，避免数据为 null
      })
      .catch(function (error) {
        console.log('/user/match error', error);
        showFailToast('加载失败');
      })
    pageNumByMatch.value = 2;
  }else {
    //普通模式
    showLoadingToast({
      message: '加载中',
      forbidClick: true
    })
    userListData = await myAxios.get('/user/recommend', {
      params: {
        pageSize: 5,
        pageNum: 1,
      },
    })
      .then(function (response) {
        console.log('/user/recommend success', response);
        showSuccessToast('加载成功')
        return response?.data?.records; //返回数据 ?.可选链操作符，避免数据为 null
      })
      .catch(function (error) {
        console.log('/user/recommend error', error);
        showFailToast('加载失败');
      })
  }
  if (userListData) {
    userListData.forEach((user: UserType) => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
      // if (user.avatarUrl){
      //   user.avatarUrl = 'http://localhost:3000/img' + user.avatarUrl;
      // }
    })
    userList.value = userListData;
  }
  pageNumByRecommend.value = 2;
  loading.value = false;
}

watchEffect(() => {
  loadData();
})

</script>

<style scoped>

</style>